<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script type="text/javascript" th:src="@{/static/jquery-2.1.4.js}"></script>
	<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
	<script type="text/javascript" th:src="@{/static/mylayer.js}"></script>
</head>
<body>
	<form id="formId" class="layui-form layui-form-pane" lay-filter="formFilter" action="">
		<input type="hidden" name="id"/>
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" name="name" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-block">
				<input type="password" name="password" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">角色</label>
			<div class="layui-input-block">
				<select name="role">
					<option value="1">超级管理员</option>
					<option value="2">普通管理员</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱</label>
			<div class="layui-input-block">
				<input type="text" name="email" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号</label>
			<div class="layui-input-block">
				<input type="text" name="phone" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">头像</label>
			<div class="layui-input-block">
				<div class="layui-upload">
					<div class="layui-upload-list">
						<img width="100px" height="100px" class="layui-upload-img" id="demo1">
						<input type="hidden" name="image" id="imageId">
						<p id="demoText"></p>
					</div>
					<button type="button" class="layui-btn" id="test1">上传图片</button>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="button" class="layui-btn" onclick="submitForm()" lay-submit="" lay-filter="submitForm">
					编辑
				</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<script>
		layui.use(['upload','form'], function () {
			var upload = layui.upload;
			var form = layui.form;

			//常规使用 - 普通图片上传
			var uploadInst = upload.render({
				elem: '#test1'
				, url: '/upload/uploadImage' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				, before: function (obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function (index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				}
				, done: function (result) {
					if (result.code == 0) {
						$('#imageId').val(result.data);
						$('#demoText').html(''); //置空上传失败的状态
					} else {
						mylayer.errorMsg(result.msg);
					}
				}
				, error: function () {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function () {
						uploadInst.upload();
					});
				}
			});

			//拿到blog_list.html传递过来的参数
			var queryString = window.location.search;
			var urlParams = new URLSearchParams(queryString);
			var id = urlParams.get("id");

			$.post(
				'/admin/selectById',
				{'id': id},
				function (result) {
					if (result.code == 0) {
						//数据填写到form表单上
						form.val('formFilter', result.data);
						$('#demo1').attr('src', '/pic/' + result.data.image);
					}
				},
				'json'
			);
		});

		function submitForm() {
			$.post(
				'/admin/update',
				$('#formId').serialize(),  // {'name':'zhansgan','password':'123'}
				function (result) {
					if (result.code == 0) {
						mylayer.okMsg(result.msg);
						setInterval(function () {
							//关闭弹出框
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
							//刷新父页面
							window.parent.location.reload();
						}, 2000)
					}
				},
				'json'
			);
		}
	</script>
</body>
</html>